<template>
    <div>
        <div class="navbar">
            <a href="#">Blog</a>
            <a href="#">Create</a>
            <a href="#" class="right">{{username}}</a>
        </div>

        <!-- Table -->
        <table>
            <tr>
                <th>ID</th>
                <th style="width: 500px">Title</th>
                <th>Date</th>
                <th></th>
            </tr>
            <tr v-for="blog in blogs" :key="blog.id">
                <td>{{ blog.id }}</td>
                <td>{{ blog.title }}</td>
                <td>{{ blog.createTime}}</td>
                <td><a href="#">编辑</a> | <a href="#" >删除</a></td>
            </tr>
        </table>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            username: "",
            blogs: [],
        };
    },
    mounted() {
        this.getBlogData();

    },
    methods: {
        getBlogData() {
            axios.get('/api/backend/posts')
                .then(response => {
                    this.blogs = response.data.data;
                    this.username=  localStorage.getItem("username")
                })
                .catch(error => {
                    console.error(error);
                });




        },

    },
};
</script>

<style>
/* Style for navigation bar */
.navbar {
    overflow: hidden;
    background-color:transparent;
}

.navbar a {
    font-weight: bolder;
    font-size: 25px;
    float: left;
    display: block;
    color:#fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a.right {
    float: right;
}
/*style for button*/
a {
    width:65px;
    height: 35px;
    background:radial-gradient(ellipse at center,#73f219,#d1d2d4,#000000);
    border-radius: 5px;
}
a:hover{
    cursor: pointer;
    background: radial-gradient(ellipse at center,#d1d2d4,#73f219,#000000);
}
/* Style for table */
table {
    width: 80%;
    margin: 20px auto 0; /* 20px上边距，居中 */
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
}

th:nth-child(1),
td:nth-child(1) {
    width: 8%;
}

th:nth-child(2),
td:nth-child(2) {
    width: 50%;
}

th:nth-child(3),
td:nth-child(3) {
    width: 20%;
}

th:nth-child(4),
td:nth-child(4) {
    width: 12%;
}
</style>